import $ from './jquery.js';
import cookie from './cookie.js';

let shop = cookie.get('shop');

shop = JSON.parse(shop);

let idList = shop.map(el => el.id).join();



$.ajax({
    type: "get",
    url: "../interface/shop.php",
    data: { idList },
    dataType: "json"
  }).then(res => {

    console.log(res[1].picture);
    let template = '';
    res.forEach((el, i) => {
      let pic = JSON.parse(el.picture);
  
      let current = shop.filter(elm => elm.id === el.id);
        
      template += `<div class="order-content" style = "border-bottom: 1px solid #e8e8e8;">
      <!-- 是否优惠 -->
      <div class="dundle-hd">
          <span class="sp1">店铺满69包邮</span>
          <span style="color: red;">已享优惠包邮&nbsp;&nbsp;</span>
          <span>满69</span>
      </div>
      <div class="dundle-main">
          <div style="display: inline-block;vertical-align:top"><input type="checkbox" checked="true" disabled = "disabled"></div>
          <div class="img-box">
              <a href=""><img src="${pic[0].src}" alt=""></a>
          </div>
          <!-- 商品标题 -->
          <div style="display: inline-block;vertical-align:top;padding-top: 20px;margin-left: 5px;padding-right: 12px;">
              <a href="" style="width: 239px;display: block;">${el.title}</a>
              <div style="margin-top: 30px;">
                  <img src="../src/img/购物车 (2).png" alt="">
                  <a href=""><img src="../src/img/购物车 (1).png" alt=""></a>
                  <a href=""><img src="../src/img/购物车.png" alt=""></a>
              </div>
          </div>
          <!-- 商品描述 -->
          <div class="describe">
              <p>净含量：50.0g</p>
              <p>适合肤质：所有肤质</p>
          </div>
          <!-- 价格 -->
          <div class="dundle-price">
              <p style="    color: #9c9c9c;
              text-decoration: line-through;
              font-family: Verdana,Tahoma,arial;">￥259.00</p>
              <p style="color: #3c3c3c;
              font-weight: 700;
              font-family: Verdana,Tahoma,arial;">￥${(+el.price).toFixed(2)}</p>
          </div>
          <!-- 数量 -->
          <div class="num">
              <input type="number" value="${current[0].num}" min="1" class="ipNum" style="width: 40px; margin:0">
          </div>
          <!-- 金额 -->
          <div class="sum">
              <p>￥${(el.price * current[0].num).toFixed(2)}</p>
          </div>
          <!-- 操作 -->
          <div class="td-op" style = "padding: 20px 0 0 1px">
              <a href="">移入收藏夹</a>
              <a href="javascript:;" class="removeitem" data-id="${el.id}">删除</a>
          </div>
      </div>
  </div>`;
    });
  
    $('.order-content').html(template);
  
    $('.td-op .removeitem').on('click', function () {
      let res = shop.filter(el => el.id != $(this).attr('data-id')); // 筛选被点击的元素
      cookie.set('shop', JSON.stringify(res)); // 剩余内容写回cookie
      location.reload();// 刷新页面
    });

    

    // $('#bothSum').html($(el.price * current[0].num).toFixed(2));


    // let bothSum = document.querySelector('#bothSum')
    // // let cartInput = document.querySelector('.cartInput')
    // // console.log(1);
  
    bothSum.innerHTML = (el.price * current[0].num).toFixed(2);


  }).catch(xhr => {
    console.log(xhr.status);
  });

  



